<template>
  <div>
    <h3>背景</h3>
    <el-form inline :model="formModel" :rules="rules" ref="form">
      <el-form-item label="最小值" prop="minPrice">
        <el-input v-model="formModel.minPrice"></el-input>
      </el-form-item>
      <el-form-item label="最大值" prop="maxPrice">
        <el-input v-model="formModel.maxPrice"></el-input>
      </el-form-item>

      <div>
        <el-button  @click='resetModel'>直接将 model重新赋值</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'invalidation-check',
  data () {
    return {

      rules: {
        minPrice: [
          { required: true, message: '最小价格不可为空', trigger: ['change', 'blur'] }
        ],
        maxPrice: [
          { required: true, message: '最大价格不可为空', trigger: ['change', 'blur'] }
        ]
      },
      formModel: {
        minPrice: '',
        maxPrice: ''
      },
      copyFromModel: {}
    }
  },
  created() {
    setTimeout(() => {
      this.formModel = Object.assign({}, {
        minPrice: 1,
        maxPrice: ''
      })
    }, 1000);
  },
  mounted() {
    this.copyFromModel = {...this.formModel}
  },
  methods: {
    resetModel() {
      this.formModel = Object.assign({}, {
        minPrice: 1,
        maxPrice: ''
      })
    },
    submit () {
      this.$refs['form'].validate(((valid) => {
        console.log(valid)

        if(valid) console.log('校验成功')
      }))
    }
  }
}
</script>
